<template>
	<view class="contanier">
		<cu-custom bgColor="primary-bg-color" :isBack="false">
			<block #leftContent>
				<view class="cu-bar justify-center">
					<view class="action sub-title flex flex-direction align-start">
						<text class="text-ABC text-bold text-black" style="left: 30rpx; font-size: 52rpx"
							>hi arpan
						</text>
						<text class="text-grey" style="left: 6rpx">Welcome Back</text>
						<text class="text-ABC text-grey" style="font-size: 110rpx">home</text>
					</view>
				</view>
			</block>
		</cu-custom>
		<view>
			<view class="flex padding-sm w-100">
				<view
					class="bg-linear box-shadow flex-sub margin-right padding flex justify-between"
					style="height: 200rpx; border-radius: 40rpx"
				>
					<view class="flex flex-direction justify-between h-100">
						<view>
							<view class="text-white text-xl"> My Location </view>
							<view style="color: #b2ffff">Burdwan</view>
						</view>
						<view style="color: #dbffff"> <text></text> Partly Cloudy</view>
					</view>
					<view class="text-bold text-white" style="align-self: center; font-size: 60rpx">28°</view>
				</view>
				<view class="box flex justify-center padding" style="height: 200rpx; flex-basis: 47%">
					<view class="flex flex-direction justify-between h-100">
						<view class="text-black text-df">Energy saving</view>
						<view class="text-bold text-green text-xxl">+35%</view>
						<view class="text-sm text-grey">23.5kWh</view>
					</view>
					<view class="flex-sub text-center">
						<image class="h-100 w-100" src="../../static/lightning.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center" style="background-color: #f0f1f5">
					<view
						class="cu-item flex-sub"
						:class="index == TabCur ? 'text-black text-bold cur' : ''"
						v-for="(item, index) in tabList"
						:key="index"
						@tap="tabSelect"
						:data-id="index"
					>
						{{ item }}
					</view>
				</view>
			</scroll-view>
			<view class="padding-lr-lg flex flex-wrap justify-between">
				<view
					:class="{ active: item.seleted && item.showBg }"
					v-for="(item, index) in cardList"
					:key="index"
					class="card radius-40 padding-tb-lg padding-lr-xl flex flex-direction justify-between"
				>
					<view class="flex justify-between align-center">
						<view class="text-center iconfont text-white light" :class="item.icon"> </view>
						<view
							v-if="item.seleted"
							:style="{ color: item.seleted ? '#fe8900' : '' }"
							style="transform: translateY(-20rpx); font-size: 40rpx"
							:class="{ 'icon-star iconfont': item.seleted && item.ifShowStar }"
						>
						</view>
					</view>

					<view class="">
						<view
							class="text-lg text-bold"
							:class="[item.seleted && item.showBg ? 'text-white' : 'text-black']"
						>
							{{ item.title }}
						</view>
						<view class="text-grey text-sm margin-top-sm">{{ item.desc }}</view>
					</view>
					<view class="flex justify-between align-center">
						<view :class="[item.seleted && item.showBg ? 'text-white' : 'text-gery']">{{
							item.seleted ? 'On' : 'Off'
						}}</view>
						<view>
							<zero-switch
								:activeColor="item.showBg ? '#fe8900' : ''"
								inactiveColor="#ffffff"
								:borderColorOn="item.showBg ? '#fe8900' : ''"
								backgroundColorOff="#d4d4d4"
								backgroundColorOn="#3b4255"
								@change="handleChange($event, item)"
							></zero-switch>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tabList: ['Living Room', 'BedRoom', 'Kitcten'],
				isOpen: false,
				cardList: [
					{
						icon: 'icon-bulb',
						title: 'Lighting',
						desc: '10 Spotlights',
						seleted: false,
						ifShowStar: true,
						showBg: true,
					},
					{
						icon: 'icon-dianshiji',
						title: 'Sony Bravia Smart TV',
						desc: '1 device',
						seleted: false,
						ifShowStar: false,
						showBg: false,
					},
					{
						icon: 'icon-kongtiao',
						title: ' LG AC ',
						desc: '2 device',
						click: item => {
							if (item.seleted) {
								uni.navigateTo({ url: '/pages/LG/LG' });
							}
						},
						seleted: false,
						ifShowStar: false,
						showBg: false,
					},
					{
						icon: 'icon-tubiaoCSban-',
						title: ' Sony Studio',
						desc: '7 devices',
						seleted: false,
						ifShowStar: false,
						showBg: false,
					},
				],
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			handleChange(e, item) {
				item.seleted = e;
				item.click && item.click(item);
			},
		},
	};
</script>
<style scoped lang="scss">
	.contanier {
		box-sizing: border-box;
		background-color: #f0f1f5 !important;
	}
	.cu-bar .action.sub-title text[class*='text-']:last-child {
		bottom: -0.6rem;
	}
	.bg-linear {
		background-image: linear-gradient(145deg, #89f7fe 0%, #66a6ff 100%);
	}
	.box-shadow {
		box-shadow: #aaaaaa 5rpx 10rpx 8rpx 0;
	}
	.box {
		border-radius: $border-radius;
		background: #e9e9e9;
		box-shadow: inset 2rpx 2rpx 12rpx #c5c5c5, inset -2rpx -2rpx 12rpx #ffffff, 4rpx 4rpx 0 #c1c1cc;
	}
	.light {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #d4d4d4;
	}
	.nav .cu-item.cur {
		position: relative;
		border-bottom: none;
		&::after {
			background-color: $switch-color;
			content: '';
			position: absolute;
			bottom: 0;
			left: calc(50% - 5rpx);
			display: block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
		}
	}
	.cardBox {
		display: flex;

		flex-wrap: wrap;
		justify-content: space-between;
	}
	.card {
		height: 350rpx;
		background: #e4e2e3;
		margin-top: 10rpx;
		width: 48%;
	}
	.card:nth-child(2n) {
		margin-left: 20rpx;
	}
	.card:nth-child(2) {
		height: 390rpx;
	}
	.card:nth-child(3) {
		height: 390rpx;
		transform: translateY(-40rpx);
	}

	.active {
		background-color: $dark !important;
	}
	/deep/ switch::after,
	switch::before {
		content: none;
	}
</style>
